/* eslint  react/no-string-refs: 0 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Input, Form, Grid } from '@alifd/next';

const { Row, Col } = Grid;
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: { xxs: 6, s: 3, l: 4 },
  wrapperCol: { s: 12, l: 12 }
};

export default class SerialEditForm extends Component {
  static displayName = 'SerialEditForm';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    let jsonConfig = this.props.jsonConfig;
    let jsonObject = {
      comValue: '',
      baudrate: 9600,
      dataBits: 8,
      stopBits: 1,
      parity: 0,
      sotimeout: 3,
      retry: 0,
    };
    try {
      jsonObject = JSON.parse(jsonConfig)
    } catch (e) {
    }
    this.state = {
      value: { ...jsonObject },
    };
  }

  formChange = (value) => {
    this.setState({
      value,
    });
  }

  validateAllFormField = (values, errors) => {
    let that = this;
    if (!errors) {
      for (let k in values) {
        if (values[k] === '') delete values[k]
      }
      this.props.confirm(values)
    } else {
      // 处理表单报错
    }
  }

  render() {
    return (
      <Form
        value={this.state.value}
        onChange={this.formChange}
        ref="socketConfigEditForm"
      >
        <div style={{ padding: '20px' }}>
          <FormItem size="small" label="串口名：" {...formItemLayout} required maxLength={30} requiredMessage="必填">
            <Input name="comValue" placeholder="串口名" />
          </FormItem>
          <FormItem size="small" label="波特率：" {...formItemLayout}>
            <Input name="baudrate" htmlType="number" placeholder="波特率" />
          </FormItem>
          <FormItem size="small" label="数据位：" {...formItemLayout}>
            <Input name="dataBits" htmlType="number" placeholder="数据位" />
          </FormItem>
          <FormItem size="small" label="停止位：" {...formItemLayout}>
            <Input name="stopBits" htmlType="number" placeholder="停止位" />
          </FormItem>
          <FormItem size="small" label="校验位：" {...formItemLayout}>
            <Input name="parity" htmlType="number" placeholder="校验位" />
          </FormItem>
          <FormItem size="small" label="读数据超时：" {...formItemLayout}>
            <Input name="sotimeout" placeholder="读数据最大超时时间, 默认值=3" />
          </FormItem>
          <FormItem size="small" label="读数据重试：" {...formItemLayout}>
            <Input name="retry" placeholder="读数据最大重试次数, 默认值=0" />
          </FormItem>
          <Row style={{ marginTop: 20 }}>
            <Col offset="3">
              <Form.Submit
                size="medium"
                type="primary"
                style={{ width: 100 }}
                validate
                onClick={this.validateAllFormField}
              >
                确  定
              </Form.Submit>
            </Col>
          </Row>
        </div>
      </Form>
    );
  }
}

const styles = {
  label: {
    textAlign: 'right',
  },
  formContent: {
    width: '100%',
    position: 'relative',
  },
  formItem: {
    alignItems: 'center',
    marginBottom: 25,
  },
  formTitle: {
    margin: '0 0 20px',
    paddingBottom: '10px',
    borderBottom: '1px solid #eee',
  },
};

